<!--
/**
* @name OperateForm
* @description **
* @author mdong
* @date 2020-05-12
* @param {**} ** **
* @example ***
*/
-->
<template>
  <div calss="operate-form">
    <a-modal :title="title"
             :width="600"
             :visible="operateVisible"
             :okText="'提交'"
             :okButtonProps="{props:{icon:'save'}}"
             :cancelButtonProps="{props:{icon:'close-circle'}}"
             :wrapClassName="isDetails?'modal-box modal-hidden-footer':'modal-box'"
             :confirm-loading="confirmLoading"
             @ok="handleSubmit"
             @cancel="handleVisible"
             :destroyOnClose="true">
      <form-loading :formLoadingVisible="formLoadingVisible"></form-loading>
      <!-- <h3 class="form-title"> 新增区域 </h3> -->
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :hideRequiredMark="isDetails"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-model-item label="上级区域名称"
                               prop="parentName">
              <a-input disabled
                       v-show="!isDetails"
                       v-model="form.parentName">
              </a-input>
              <span v-show="isDetails">{{form.parentName || '无'}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="区划代码"
                               prop="code">
              <a-input v-model="form.code"
                       v-show="!isDetails"
                       placeholder="请输入区划代码"
                       :maxLength="20">
              </a-input>
              <span v-show="isDetails">{{form.code}}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-model-item label="本级区域名称"
                               prop="name">
              <a-input v-model="form.name"
                       v-show="!isDetails"
                       placeholder="请输入本级区域名称"
                       :maxLength="20">
              </a-input>
              <span v-show="isDetails">{{form.name}}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { regexConstants, validators } from '@/utils/validate'
import { Modal, FormModel, Row, Col, Input } from 'ant-design-vue'
import FormLoading from '@/components/FormLoading'
import { getOrganizationById } from '@/request/api/permissionManagement/org'
export default {
  name: 'OperateForm',
  components: {
    AModal: Modal,
    FormLoading,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ARow: Row,
    ACol: Col,
    AInput: Input
  },
  props: {
    // 是否打开新增和编辑抽屉
    operateVisible: {
      type: Boolean,
      required: true
    },
    // 弹框提交按钮loading
    confirmLoading: {
      type: Boolean,
      required: true
    },
    optType: {
      type: String,
      default: 'add'
    },
    // 新增和编辑抽屉数据
    operateData: {
      type: Object,
      required: true,
      default: function () {
        return {
          parentName: {
            type: String,
            default: ''
          },
          code: {
            type: String,
            default: ''
          },
          name: {
            type: String,
            default: ''
          }
        }
      }
    }
  },
  data () {
    return {
      // 标题
      title: '',
      // 表单加载loading
      formLoadingVisible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      // 表单
      form: {
        parentName: '',
        name: '',
        code: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入本级区域名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入区划代码', trigger: 'blur' },
          {
            pattern: regexConstants.character,
            validator: validators.newValidate,
            message: '请输入非中文的区划代码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    // 监听抽屉打开关闭
    operateVisible: {
      async handler (newV, oldV) {
        // 打开抽屉
        if (newV) {
          // 新增
          if (this.optType === 'add') {
            this.title = '新增区域'
            this.form.parentName = this.operateData.parentName
            for (const key in this.operateData) {
              if (key !== 'parentName') {
                this.operateData[key] = ''
              }
            }
            this.form = Object.assign({}, this.operateData)
          }
          // 编辑
          if (this.optType === 'edit' || this.optType === 'view') {
            this.formLoadingVisible = true
            this.title = '编辑区域'
            if (this.optType === 'view') {
              this.title = '区域详情'
            }
            this.form = Object.assign({}, this.operateData)
            await this.getOrganizationById()
            this.formLoadingVisible = false
          }
        }
      }
    }
  },
  mounted () {
  },
  computed: {
    isDetails () {
      return this.optType === 'view'
    }
  },
  beforeDestroy () {
    this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
    for (const key in this.operateData) {
      this.operateData[key] = ''
    }
  },
  methods: {
    // 根据id查询详情
    async getOrganizationById () {
      await getOrganizationById({ id: this.form.id }).then((res) => {
        if (res.code === '0') {
          this.form = Object.assign({}, res.data)
        }
      })
    },
    // 提交表单
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const data = Object.assign({}, this.form)
          if (this.optType === 'edit') {
            data.id = this.operateData.id
          }
          this.$emit('handidleSubmit', data)
        } else {
          this.$message.error('请完善信息！')
          return false
        }
      })
    },
    // 关闭抽屉
    handleVisible () {
      this.$refs.ruleForm.resetFields()
      this.$emit('handleVisible', false)
    }
  }
}
</script>
<style lang="scss">
.form-title {
  font-size: 16px;
  border-bottom: 1px solid #e8e8e8;
  height: 40px;
  margin-bottom: 20px;
}
</style>
